import '../public/index'
import url from '../data/url'
import request from '../data/request'
import { header } from '../data/config'

const base          = url.base,
      editNotice    = request.editNotice;

//  点击新增一行弹出模态框
$('.notice-deploy-btn button').on('click', (e) => {
  e.preventDefault();

  bootbox.confirm({
    title: '新增信息',
    message: '<div class="notice-deploy-layer">\
                <input id="notice-deploy-input" placeholder="输入名称" class="form-control" type="text">\
                <b>:</b>\
                <select id="notice-deploy-select" class="form-control" name="" id="">\
                <option value="">请选择</option>\
                <option value="name">客户姓名</option>\
                <option value="ebank">E卡账号</option>\
                <option value="channel">开户行</option>\
                <option value="payAmount">存款金额</option>\
                <option value="identityCard">身份证号</option>\
                <option value="rawAddTime">办理时间</option>\
                <option value="phone">联系方式</option>\
                </select>\
                </div>',
    buttons: {
      cancel: {
        label: '取消'
      },
      confirm: {
        label: '确认'
      }
    },
    callback: (result) => {

      if (!result) {
        return
      }

      let input = $('#notice-deploy-input').val(),
          select = $('#notice-deploy-select').val();

      if(input === '' || select === ''){

        layer.msg('数据不能为空', {
          icon: 5
        })

        return false
      }

      let  html = `<li class="notice-deploy-item">
                    <input value="${ input }" class="form-control" type="text">
                    <b>:</b>
                    <select class="form-control" name="" id="">
                    <option ${ select == '' ? 'selected' : ''} value="">请选择</option>
                    <option ${ select == 'name' ? 'selected' : ''} value="name">客户姓名</option>
                    <option ${ select == 'ebank' ? 'selected' : ''} value="ebank">E卡账号</option>
                    <option ${ select == 'channel' ? 'selected' : ''} value="channel">开户行</option>
                    <option ${ select == 'payAmount' ? 'selected' : ''} value="payAmount">存款金额</option>
                    <option ${ select == 'identityCard' ? 'selected' : ''} value="identityCard">身份证号</option>
                    <option ${ select == 'rawAddTime' ? 'selected' : ''} value="rawAddTime">办理时间</option>
                    <option ${ select == 'phone' ? 'selected' : ''} value="phone">联系方式</option>
                    </select>
                    <a class="goTop glyphicon glyphicon-arrow-up" href=""></a>
                    <a class="delete glyphicon glyphicon-remove" href=""></a>
                    </li>`;



      $('#notice-deploy-list').append(html);

    }
  })
});

//  点击删除按钮删除点击行
$('#notice-deploy-list').on('click', '.delete', (e) => {
  e.preventDefault();

  $(e.target).parent().remove();
})

//  点击置顶按钮置顶点击行
$('#notice-deploy-list').on('click', '.goTop', (e) => {
  e.preventDefault();

  let self = $(this).parent().clone();

  $('#notice-deploy-list .notice-deploy-item:first-child').before(self);
  $(e.target).parent().remove();
})

//保存事件
$("#save").click(function(){

  $('#save').attr('disabled',true);

  let templateDetails = new Array(),
    items = $("#notice-deploy-list .notice-deploy-item");

  $.each(items,(i, p) => {

    let name   = p.children[0].value,	  //名称
      value  = p.children[2].value,	//值属性名
      seqStr = (i + 1);

    templateDetails.push({columnName: name, columnValue: value, seqStr: seqStr});

  });

  let loading_modal = layer.msg('提交中...', {
    icon: 16,
    time: 0
  })

  $.ajax({
    headers: header,
    url: base + editNotice,
    contentType: "application/json",
    type: 'POST',
    data: JSON.stringify({details: templateDetails, title: $("#title").val(), headStr: $("#headStr").val(), footerStr: $("#footerStr").val()})
  })
    .done(function (res) {
      console.log(res)

      if (res.code == 0) {

        layer.msg('保存成功,跳转至列表页', {
          icon: 6
        })

        setTimeout(() => {
          $('#save').attr('disabled',false);
          window.location.href = './index.html';
        },500)

      } else {

        layer.msg( res.message, {
          icon: 5
        })

      }
    })
    .fail(function (res) {
      console.log(res)

      layer.msg('保存失败', {
        icon: 5
      })

    })
    .always(function (res) {
      console.log("complete")

      layer.close(loading_modal)

    })
})

